<template>
<el-scrollbar style="height:100%" class="opration-container">
     <div class="opration">
        <div class="oprationLeft">
            <el-form :inline="true" size="small" :model="queryData">
                <el-form-item :label="$t('操作时间')">
                    <el-date-picker
                        v-model="queryData.startDateTime"
                        type="date"
                        style="width:130px"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :placeholder="$t('选择日期')"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('至')">
                     <el-date-picker
                        v-model="queryData.endDateTime"
                        type="date"
                        style="width:130px"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :placeholder="$t('选择日期')"
                        :picker-options="{
                            disabledDate(time) {
                            if (!queryData.startDateTime) return false
                            return time.getTime() < new Date(queryData.startDateTime).getTime()
                            }
                        }"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="preSearch">{{ $t('筛选') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="oprationRight">
            <el-form :inline="true" size="small" :model="queryData">
                <el-form-item>
                    <el-select v-model="queryData.queryType" :placeholder="$t('全部选项')" clearable style="width:100px;" @clear="doClearQuery" @change="change">
                        <el-option v-for="(item, index) in searchItemData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input :placeholder="$t('请输入关键词搜索')" v-model="queryData.queryParam" clearable style="width:160px;">
                    <template slot="prepend"><i class="iconfont icon-sousuo" /></template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <bs-search-button-icon @click.native="doList"></bs-search-button-icon>
                </el-form-item>
            </el-form>
        </div>
    </div>
</el-scrollbar>
</template>
<script>
export default {
    name: 'DeviceLogCondition',
    data() {
        return {
            showItem: '',
            searchItemData: [
                { name: '全部选项', value: 0 },
                { name: 'MAC地址', value: 2 },
                { name: '终端名称', value: 3 },
                { name: '级别', value: 4 },
            ],
        }
    },
    mounted() {
        this.$nextTick(function() {
        })
    },
    props: {
        queryData: {
            default: {}
        }
    },
    methods: {
        // 查询
        doList() {
            this.queryData.page = 1
            this.$eventBus.$emit('doList', this.queryData)
        },
        change(val)
        {
            // if(val == 4)
            // {
            //     this.select = false
            //     this.queryData.queryParam = 
            // }else{
            //     this.select = false
            // }
        },
        // 点击清除下拉选择条件
        doClearQuery() {
            // this.queryData.queryType = 0
            // this.queryData.queryParam = ''
            this.$set(this.queryData, 'queryType', 0)
            this.$set(this.queryData, 'queryParam', '')
        },
        // 筛选
        preSearch() {
            this.$eventBus.$emit('doList', this.queryData)
        },
    }
}
</script>